<template>
  <header>
    <div class="logo ml34">
      <img src="@/assets/images/logo.svg" alt="logo" />
    </div>
    <div class="header-right">
      <nav>
        <ul>
          <li>首页</li>
          <li>云译通翻译</li>
          <li>解决方案</li>
          <li>下载</li>
          <li>关于我们</li>
          <!--          <li>首页</li>-->
        </ul>
      </nav>
      <div class="to-workbench click_ac" @click="handleToLogin">进入工作台<span></span></div>
    </div>
  </header>
  <div class="wh-home">
    <div class="banner" :class="bannerUpDown">
      <div class="inner" @mousemove="handleMousemove" @mouseleave="changeUpDown">
        <img class="num1" src="../../assets/images/home/svg1.svg" alt="01" />
        <img class="num2" src="../../assets/images/home/svg2.svg" alt="02" />
        <img class="num3" src="../../assets/images/home/svg3.svg" alt="03" />
        <img class="num4" src="../../assets/images/home/svg4.svg" alt="04" />
        <img class="num5" src="../../assets/images/home/svg5.svg" alt="05" />
        <img class="num6" src="../../assets/images/home/svg6.svg" alt="06" />
        <img class="num7" src="../../assets/images/home/svg7.svg" alt="07" />
        <img class="num8" src="../../assets/images/home/svg8.svg" alt="08" />
        <img class="num9" src="../../assets/images/home/svg9.svg" alt="09" />
        <div class="num3-after"></div>
      </div>
      <text-jump class="title" value="云译通文档翻译必备工具"></text-jump>
      <div class="subtitle mt38">高效速度快 | 格式还原高 | 学习能力强</div>
      <div class="start fs22 click_ac">立即开始</div>
      <div class="video">
        <img src="../../assets/images/home/video.svg" alt="video" />
        观看视频
      </div>
    </div>
    <book />
    <effect />
    <banner />
    <quality />
    <transform />
    <wh-use />
    <start />
  </div>
  <div class="footer">
    <div class="footer-top">
      <div class="top-left">
        <div class="logo mb28">
          <img src="../../assets/images/logo.svg" alt="logo" />
        </div>
        <div class="wrapper">
          <div class="code mr8">
            <img src="../../assets/images/home/wife.jpg" alt="code" />
          </div>
          <div class="code mr30">
            <img src="../../assets/images/home/husband.png" alt="code" />
          </div>
          <div class="info">
            <p><span>电话：</span>400-888-3108</p>
            <p><span>邮箱：</span>yixun@eson101.com</p>
            <p><span>QQ：</span>3005226488</p>
          </div>
        </div>
      </div>
      <div class="top-right">
        <dl>
          <dt>热门功能</dt>
          <dd>文字翻译</dd>
          <dd>文档翻译</dd>
          <dd>图片识别翻译</dd>
          <dd>译后编辑</dd>
          <dd>语料对齐</dd>
          <dd>行业术语</dd>
          <dd>即时聊天</dd>
        </dl>
        <dl>
          <dt>服务</dt>
          <dd>联系我们</dd>
          <dd>解决方案</dd>
          <dd>帮助中心</dd>
          <dd></dd>
        </dl>
        <dl>
          <dt>关于</dt>
          <dd>关于我们</dd>
          <dd>我们的客户</dd>
          <dd>企业动态</dd>
          <dd>媒体报道</dd>
        </dl>
      </div>
    </div>
    <div class="footer-bottom">
      <div class="top">
        <div class="lang"></div>
        <div class="third">
          <img src="../../assets/images/home/sou-hu.png" alt="sou-hu" />
          <img src="../../assets/images/home/weChat.png" alt="weChat" />
          <img src="../../assets/images/home/xin-lang.png" alt="xin-lang" />
          <img src="../../assets/images/home/tou-tiao.png" alt="tou-tiao" />
        </div>
      </div>
      <p>Copyright © 2017 - 2021 蜀ICP备18010555号-9川公网安备 51010702002020号</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import Book from '@/components/home/book.vue'
import Effect from '@/components/home/effect.vue'
import Banner from '@/components/home/banner.vue'
import Quality from '@/components/home/quality.vue'
import Transform from '@/components/home/transform.vue'
import WhUse from '@/components/home/whUse.vue'
import Start from '@/components/home/start.vue'
import TextJump from '@/base/textJump.vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const bannerUpDown = ref<'up' | 'down'>('up')
const timer = ref<ReturnType<typeof setTimeout>>()

const handleToLogin = () => {
  console.log(1111111111111111)
  router.push('/login')
}

const changeUpDown = () => {
  timer.value && clearTimeout(timer.value)
  timer.value = setTimeout(() => {
    bannerUpDown.value = bannerUpDown.value === 'up' ? 'down' : 'up'
    changeUpDown()
  }, 4000)
}

const handleMousemove = (ev: MouseEvent) => {
  timer.value && clearTimeout(timer.value)
  const target = ev.target as HTMLElement
  const list1 = ['num1', 'num4', 'num3', 'num3-after'].includes(target.className)
  const list2 = ['num2', 'num5', 'num6', 'num7'].includes(target.className)
  if (list1) bannerUpDown.value = 'up'
  if (list2) bannerUpDown.value = 'down'
}

onMounted(() => {
  changeUpDown()
})
</script>

<style scoped lang="scss">
@import '../../assets/scss/base';

$delay: 1s;
$scale: 0.95;

header {
  background-color: #fff;
  position: fixed;
  z-index: 99999;
  left: 0;
  top: 0;
  width: 100vw;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 18px;

  .logo {
    height: 48px;

    img {
      height: 48px;
    }
  }

  .header-right {
    margin-right: screenX(339px);
    display: flex;
    align-items: center;

    nav {
      > ul {
        display: flex;

        > li {
          color: #000;
          margin-right: 42px;
          font-size: 16px;
          font-weight: 400;

          &:last-of-type {
            margin-right: 0;
          }
        }
      }
    }

    .to-workbench {
      margin-left: screenX(76px);
      font-size: 16px;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 141px;
      height: 40px;
      line-height: 40px;
      background: #1f86ff;
      border-radius: 20px;

      > span {
        margin-left: 7px;
        display: inline-block;
        width: 16px;
        height: 2px;
        background-color: #fff;
        position: relative;

        &::before,
        &::after {
          content: '';
          width: 10px;
          height: 2px;
          background-color: #fff;
          position: absolute;
          right: 0;
          top: 50%;
          transform-origin: right center;
          transform: translateY(-50%) rotateZ(45deg);
        }

        &::after {
          transform: translateY(-50%) rotateZ(-45deg);
        }
      }
    }
  }
}

.wh-home {
  margin-top: 35px;
  width: 100vw;
  overflow-x: clip;

  .banner {
    width: 100vw;
    position: relative;
    text-align: center;
    display: inline-block;
    background-color: #fff;

    &.up {
      > .inner img.num1,
      > .inner img.num4 {
        transform: translateX(-10px) translateY(-10px) scale($scale);
        box-shadow: 63px 80px 111px 0 rgba(212, 220, 236, 0.32);
      }

      > .inner img.num3 {
        transform: translateX(-10px) translateY(-10px) scale($scale);
      }

      .num3-after {
        transform: translateX(-10px) translateY(-10px) scale($scale);
        box-shadow: 25px 32px 68px 0 rgba(192, 223, 255, 0.44);
      }
    }

    &.down {
      > .inner img.num2 {
        transform: translateX(-10px) translateY(-10px) scale($scale);
        box-shadow: 63px 80px 111px 0 rgba(212, 220, 236, 0.32);
      }

      > .inner img.num5,
      > .inner img.num6,
      > .inner img.num7 {
        transform: translateX(10px) translateY(-10px) scale($scale);
        box-shadow: -63px 80px 111px 0 rgba(212, 220, 236, 0.32);
      }
    }

    .num3-after {
      position: absolute;
      width: 173px;
      height: 106px;
      left: 659px;
      top: 343px;
      border-radius: 16px;
      transition: all $delay;
    }

    > .inner {
      width: 1920px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);

      > img {
        display: inline-block;
        object-fit: contain;
        border-radius: 24px;
        position: absolute;
        transition: all $delay;
        transform: scale($scale);

        &.num1 {
          left: 286px;
          top: 155px;
        }

        &.num2 {
          left: 242px;
          top: 509px;
          border-radius: 14px 14px 24px 24px;
        }

        &.num3 {
          left: 659px;
          z-index: 1;
          top: 232px;
          border-radius: 16px;
        }

        &.num4 {
          right: 700px;
          top: 158px;
        }

        &.num5 {
          right: 364px;
          top: 424px;
        }

        &.num6 {
          right: 338px;
          top: 152px;
        }

        &.num7 {
          right: 101px;
          top: 260px;
        }

        &.num8 {
          left: 125px;
          top: 318px;
        }

        &.num9 {
          left: 756px;
          top: 129px;
          border-radius: 9px;
        }
      }
    }

    > .title {
      position: relative;
      z-index: 10;
      margin-top: 566px;
      font-size: 62px;
      font-weight: 800;
      color: #324153;

      > span {
        color: #1f86ff;
      }
    }

    > .subtitle {
      position: relative;
      z-index: 10;
      color: #324153;
      font-size: 24px;
    }

    > .start {
      margin-top: 44px;
      color: #fff;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 153px;
      height: 54px;
      background-color: #1f86ff;
      box-shadow: 13px 17px 27px 2px rgba(77, 157, 251, 0.27);
      border-radius: 27px;

      &:active {
        box-shadow: 13px 17px 27px 2px rgba(77, 157, 251, 0.27) inset !important;
      }
    }

    > .video {
      margin-top: 43px;
      font-size: 22px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #324153;

      img {
        width: 22px;
        height: 22px;
        object-fit: contain;
        margin-right: 8px;
      }
    }
  }
}

.footer {
  width: 1400px;
  margin: 0 auto;
  padding-bottom: 48px;

  > .footer-top {
    padding-top: 132px;
    padding-bottom: 126px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e7eef6;
    box-sizing: border-box;

    > .top-left {
      .logo img {
        height: 51px;
        object-fit: contain;
      }

      .wrapper {
        display: flex;
        align-items: center;

        .code {
          width: 107px;
          position: relative;
          font-size: 14px;
          font-weight: 400;
          color: #9aa2ac;

          &::after {
            content: '订阅号';
            white-space: nowrap;
            position: absolute;
            left: 50%;
            bottom: -22px;
            transform: translateX(-50%);
          }

          &:nth-of-type(2) {
            &::after {
              content: '在线咨询';
            }
          }

          img {
            width: 107px;
            object-fit: contain;
          }
        }

        .info {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 84px;
        }
      }
    }

    > .top-right {
      width: 680px;
      display: flex;
      justify-content: space-between;

      > dl {
        width: 100px;
        height: 200px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        &:first-of-type {
          width: 280px;

          > dd {
            width: 50%;

            &:nth-of-type(2n) {
              text-align: right;
            }
          }
        }

        dt {
          width: 100%;
          min-width: 100%;
          height: 20px;
          line-height: 20px;
          font-size: 20px;
          font-weight: 600;
          color: #373737;
          margin-bottom: 34px;
        }

        dd {
          width: 100%;
          height: 16px;
          line-height: 16px;
          font-size: 16px;
          font-weight: 300;
          color: #9aa2ac;
          margin-bottom: 27px;
          cursor: pointer;
          transition: all 1s $cubic;

          &:hover {
            color: #000;
          }

          &:last-of-type {
            margin-bottom: 0;
          }
        }
      }
    }
  }

  > .footer-bottom {
    padding-top: 24px;
    height: 120px;

    .top {
      display: flex;
      justify-content: space-between;

      > .third {
        > img {
          margin-left: 13px;
          height: 30px;
          object-fit: fill;
        }
      }
    }

    > p {
      padding-top: 56px;
      text-align: center;
      font-size: 16px;
      font-weight: 300;
      color: #9eafc3;
    }
  }
}
</style>
